<template>
  <div class="page-main">
    <page-tools>
      <el-button @click="handleOpenDialog('new')" type="primary">新建模块</el-button>
      <el-button @click="handleOpenDialog('new')" type="primary">新建页面</el-button>
    </page-tools>

    <div class="page-content">
      <div class="page-left-menu">
        <ul>
          <li v-for="(item, i) in moduleList" :key="i" @click="handleChoiceModule(item.code)" :class="{ 'li-active': moduleChecked === item.code }">
            <span class="li-label">{{ item.label }}</span>
            <span class="li-btns">
              <i class="iconfont icon-editor" @click.stop="handelEdit('module', item.code)"></i>
              <i class="iconfont icon-ashbin" @click.stop="handleDelete('module', item.code)"></i>
            </span>
          </li>
        </ul>
      </div>

      <div class="page-right-main">
        <ul v-if="pagesInModule.length > 0">
          <li v-for="(item, i) in pagesInModule" :key="i">
            <span class="li-label">{{ item.label }}</span>
            <span class="li-btns">
              <i class="iconfont icon-editor" @click.stop="handelEdit('page', item.label)"></i>
              <i class="iconfont icon-ashbin" @click.stop="handleDelete('page', item.label)"></i>
            </span>
          </li>
        </ul>
        <el-empty v-else />
      </div>
    </div>

    <Loger ref="pageLoger" :size="'small'" @submit="handleSubmit" @cancel="handelCancel" />
  </div>
</template>

<script lang="ts" setup>
  /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
   * @Name: authority
   * @Author: Zhang Ziyi
   * @Email: 15227974559@163.com
   * @Date: 2022-06-09 17:17
   * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

  import Message from '@/utils/message';
  import { ref, nextTick } from 'vue';

  const module = '';
  console.log(module);
  // 声明ref
  const pageLoger = ref();
  // 声明数据

  // loger
  const logerType = ref<'new' | 'edit' | 'show'>('new');
  // 打开弹框
  const handleOpenDialog = (type: 'new' | 'edit' | 'show', row?: any) => {
    console.log(row);
    logerType.value = type;
    const title = (type === 'new' ? '新建' : type === 'edit' ? '编辑' : '查看') + '模块';
    pageLoger.value.open(title);
    nextTick(() => {});
  };
  const moduleChecked = ref('authority');
  const moduleList = ref([
    { label: '人资系统', code: 'authority' },
    { label: '个案管理', code: 'a' },
    { label: '心理测评', code: 'b' },
    { label: '医院心测', code: 'c' },
    { label: '线上商城', code: 'd' },
    { label: '官网后台', code: 'e' },
    { label: '量表管理', code: 'f' },
  ]);

  const pageList = ref([
    { label: '公司管理', url: '/authority/company', module: 'authority', sort: 1 },
    { label: '账号管理', url: '/authority/company', module: 'authority', sort: 2 },
    { label: '用户管理', url: '/authority/company', module: 'authority', sort: 3 },
    { label: '角色管理', url: '/authority/company', module: 'authority', sort: 4 },
    { label: '权限管理', url: '/authority/company', module: 'authority', sort: 5 },
  ]);

  const pagesInModule = ref(pageList.value.filter((item) => item.module === moduleList.value[0]?.code));

  // 弹框确定
  const handleSubmit = (cb: () => void) => {
    cb();
  };
  // 弹框取消
  const handelCancel = (cb: () => void) => {
    cb();
  };
  const handelEdit = (type: string, code: string) => {
    if (type === 'module') {
      console.log(code);
    } else {
      console.log(code);
    }
  };
  const handleDelete = (type: string, code: string) => {
    console.log('🚀 ~ file: authority.vue ~ line 103 ~ handleDelete ~ code', code);
    if (type === 'module') {
      Message.delete('您确定要删除该模块吗？', () => {
        Message.info('您点击了确定！');
      });
    } else {
      Message.delete('您确定要删除该页面吗？', () => {
        Message.info('您点击了确定！');
      });
    }
  };
  const handleChoiceModule = (code: string) => {
    moduleChecked.value = code;
    pagesInModule.value = pageList.value.filter((item) => item.module === code);
  };
</script>

<style lang="scss" scoped>
  .page-content {
    position: relative;
    font-size: 14px;
    .page-left-menu {
      position: absolute;
      width: 200px;
      cursor: pointer;
      width: 200px;
      border: 1px solid #eee;
      min-height: 500px;
      padding: 10px;
      overflow: auto;
      li {
        width: 100%;
        height: 40px;
        line-height: 40px;
        display: flex;

        &.li-active {
          color: $blue;
        }
        span.li-label {
          flex: 1;
        }
        span.li-btns {
          flex: 0;
          i {
            padding-right: 5px;
            font-size: 14px;

            &:hover {
              color: skyblue;
            }
          }
        }
      }
    }
    .page-right-main {
      margin-left: 240px;
      border: 1px solid #eee;
      height: 500px;
      overflow: auto;
      padding: 10px;

      li {
        display: flex;
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        &:hover {
          background: #eee;
        }
        &.li-active {
          color: skyblue;
        }
        span.li-label {
          flex: 1;
        }
        span.li-btns {
          flex: 0;
          i {
            cursor: pointer;
            padding-right: 5px;
            font-size: 14px;
            &:hover {
              color: skyblue;
            }
          }
        }
      }
    }
  }
</style>
